<template>
	<div class="content">
		<!-- <view class="tab-container"> -->
		<!-- <view class="tab-headers">
				<view class="tab-header" :class="{ active: currentIndex === 0 }" @click="changeTab(0)">转入</view>
				<view class="tab-header" :class="{ active: currentIndex === 1 }" @click="changeTab(1)">转出</view>
			</view> -->
		<view class="tab-content">
			<div class="list-header">
				<!-- <uni-data-checkbox
						mode="tag"
						v-model="selectType"
						:localdata="currentIndex == 0 ? sex : sex2"
						style="flex: 2; display: inline-block"
						@change="checkChange"
					></uni-data-checkbox> -->
				<view class="searchInput" @click="onClickType">
					{{ selectTypeBase }}
					<uni-icons type="right" size="12" style="color: #b0b0b0"></uni-icons>
				</view>
				<div class="title-date">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">
								{{ date }}
								<uni-icons type="right" size="12" style="color: #b0b0b0"></uni-icons>
							</view>
						</picker>
					</view>
				</div>
			</div>
			<scroll-view
				scroll-y
				class="list-container"
				:scroll-top="scrollTop"
				@scrolltolower="loadMore"
				refresher-enabled="true"
				:refresher-triggered="refresherTriggered"
				refresher-threshold="50"
				@refresherrefresh="onRefresherRefresh"
			>
				<div>
					<view class="record-list-container" v-for="(item, index) in recordList" :key="index">
						<view class="record-list-title" v-if="item.style == 1">
							<view class="left">{{ item.data.dateStr || '' }}</view>
							<view class="right">支出￥{{ item.data.expenseSum || 0 }} 收入￥{{ item.data.incomeSum || 0 }}</view>
						</view>
						<view v-else class="record-item" @click="jump(item)">
							<view class="record-header">
								<text class="record-header-text">{{ item.data.title || '' }}</text>
								<text class="amount2" :style="{ color: item.data.incomeExpenseType == 1 ? '#FF6737' : 'black' }">
									{{ item.data.incomeExpenseType == 1 ? '+' : '-' }}{{ item.data.balance || 0 }}
								</text>
							</view>
							<view class="record-meta">
								<text>{{ item.data.accountDateStr || '' }}</text>
								<!-- <text v-if="currentIndex == 1" :class="itemChild.balanceStatus == 0 ? 'statusLose' : 'status'">{{ itemChild.totalPrice }}</text> -->
								<text style="color: #b0b0b0">{{ item.data.totalPrice || 0 }}</text>
							</view>
							<div class="line"></div>
						</view>
					</view>
				</div>
				<view class="loading-status">
					<template v-if="loading">
						<uni-load-more status="loading"></uni-load-more>
					</template>
					<template v-else-if="noMoreData">
						<text class="no-more">没有更多数据了</text>
					</template>
				</view>
			</scroll-view>
		</view>		
		<!-- </view> -->
		<uni-popup ref="popupCenter" type="bottom">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="popup-title">请选择筛选项</view>
				<view class="popup-tab">收支类型</view>
				<uni-data-checkbox mode="tag"  @change="checkChangeList" v-model="selectType" :localdata="sex" style="flex: 2; display: inline-block"></uni-data-checkbox>
				<view class="popup-tab">交易类型</view>
				<uni-data-checkbox mode="tag" v-model="selectType2" :localdata="sex2" style="flex: 2; display: inline-block"></uni-data-checkbox>
				<view class="footer">
					<view class="btn1" @click="onClose">取消</view>
					<view class="btn2" @click="onSubmit">确定</view>
				</view>
			</view>
		</uni-popup>
	</div>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			date: currentDate,
			currentIndex: 1, // 当前选中的选项卡索引，初始为0即选中第一个
			selectType: 'all',
			selectType2: 'all',
			selectTypeBase: '全部账单',
			page: 1, // 当前页码
			pageSize: 5, // 每页条数
			loading: false, // 加载状态
			noMoreData: false, // 是否无更多数据
			scrollTop: 0, // 滚动位置,
			// total: 0,
			sex: [
				{
					text: '全部',
					value: 'all'
				},
				{
					text: '收入',
					value: 1
				},
				{
					text: '支出',
					value: 2
				}
			],
			sex2: [
				{
					text: '全部',
					value: 'all'
				},
				{
					text: '分红',
					value: 3
				},
				{
					text: '佣金',
					value: 2
				},
				{
					text: '提现',
					value: 1
				},
				{
					text: '充值',
					value: 4
				}
			],
			statusCode: {
				1: '待结算',
				2: '已结算'
			},
			statusCode2: {
				0: '失败',
				1: '成功',
				2: '审核中'
			},

			recordList: [],
			// recordList: []，
			throttleFn: null,
			refresherTriggered: false
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad(option) {
		if (option.selectType) {
			this.selectType2 = option.selectType;
			this.selectTypeBase = this.sex2.find((v) => v.value == this.selectType2)?.text;
		}
		this.initData();

		this.throttleFn = this.$throttle(this.fetchData, 1000);
	},
	methods: {
		onRefresherRefresh(e) {
			uni.showLoading({
				title: '加载中'
			});
			this.refresherTriggered = true;
			this.fetchData('scrollTop');
		},
		onSubmit() {
			this.selectTypeBase = this.sex2.find((v) => v.value == this.selectType2)?.text;
			if (this.selectTypeBase == '全部') {
				this.selectTypeBase = '全部账单';
			}
			this.$refs.popupCenter.close();
			this.onClose()
			uni.showLoading({
				title: '加载中'
			});
			// this.page = 1;
			this.recordList = [];
			this.fetchData();
		},
		onClose() {
			this.$refs.popupCenter.close();
			this.selectType2 = 'all';
			this.selectType = 'all';
			this.sex2.forEach((item) => {
				item.disable = false
			})
		},
		onClickType() {
			this.$refs.popupCenter.open();
		},
		jump(item) {
			if (item.data.financialType == 1) {
				uni.navigateTo({
					url: `/mineComponentPackage/component/schedule/index?withdrawalId=${item.data.relationId}`
				});
			} else {
				uni.navigateTo({
					url: `/mineComponentPackage/component/check/base?id=${item.data.id}`
				});
			}
		},
		changeTab(index) {
			this.currentIndex = index;
			this.recordList = [];
			this.page = 1;
			this.selectType = 'all';
			uni.showLoading({
				title: '加载中'
			});
			this.fetchData();
		},
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		},
		subtractMonths(dateStr, monthsToSubtract) {
			// 解析输入的日期字符串
			const [year, month] = dateStr.split('-').map(Number);
			// 计算目标月份
			let targetMonth = month - monthsToSubtract;
			let targetYear = year;

			// 处理跨年情况
			while (targetMonth < 1) {
				targetMonth += 12;
				targetYear--;
			}

			// 格式化月份为两位数
			const formattedMonth = targetMonth.toString().padStart(2, '0');
			// 组合成最终的日期字符串
			const resultDate = `${targetYear}-${formattedMonth}`;
			console.log(resultDate);
			return resultDate;
		},
		// 初始化数据
		async initData() {
			try {
				this.loading = true;
				this.fetchData();
			} finally {
				this.loading = false;
			}
		},

		// 加载更多
		async loadMore() {
			if (this.loading || this.noMoreData) return;

			try {
				this.loading = true;
				// this.page = this.page + 1;
				this.throttleFn('scrollBottom');
			} catch (e) {
			} finally {
				this.loading = false;
			}
		},

		// 请求数据（需替换为真实API）
		async fetchData(type) {
			const selectYear = this.date?.split('-')?.[0];
			const selectMonth = this.date?.split('-')?.[1];
			const data = {
				// page: this.page,
				// pageSize: 12,
				incomeExpenseType: this.selectType == 'all' ? null : this.selectType,
				selectType: this.selectType2 == 'all' ? null : this.selectType2,
				selectMonth: selectMonth,
				selectYear: selectYear,
				slideDirection: 0
			};
			if (type == 'scrollBottom') {
				let id = null;
				let accountDateStr = null;
				for (let i = this.recordList.length - 1; i >= 0; i--) {
					if (this.recordList[i]?.data?.id && this.recordList[i]?.style == 2) {
						id = this.recordList[i]?.data?.id;
						accountDateStr = this.recordList[i]?.data?.accountDateStr;
						break;
					}
				}
				delete data.selectYear;
				delete data.selectMonth;
				data.id = id;
				data.accountDateStr = accountDateStr;
				data.slideDirection = 2;
			} else if (type == 'scrollTop') {
				let id = null;
				let accountDateStr = null;
				for (let i = 0; i < this.recordList.length; i++) {
					if (this.recordList[i]?.data?.id && this.recordList[i]?.style == 2) {
						id = this.recordList[i]?.data?.id;
						accountDateStr = this.recordList[i]?.data?.accountDateStr;
						break;
					}
				}
				delete data.selectYear;
				delete data.selectMonth;
				data.id = id;
				data.accountDateStr = accountDateStr;
				data.slideDirection = 1;
			}

			this.$post('/yahe/account/incomeExpense', data, '1').then((res) => {
				if (res.success) {
					// uni.stopPullDownRefresh();
					if (type == 'scrollTop') {
						const list = [];
						const dateStr = res?.content?.find((v) => v.style == 1)?.dateStr;
						this.recordList.forEach((item) => {
							if (item.style == 2 || item.data.dateStr != dateStr) {
								list.push(item);
							}
						});
						this.recordList = (res?.content || []).concat(list);
						const date_str = this.recordList?.[0]?.data.dateStr;
						if (date_str) {
							this.date = date_str.replace('年', '-').replace('月', '');
						}
					} else {
						this.recordList = this.recordList.concat(res?.content || []);
					}
					// this.recordList = this.recordList.concat(res.content?.records || []);
					// this.page = res.content?.current;
					// this.total = res.content?.total;
					this.refresherTriggered = false;

					this.checkNoMoreData(res?.content);
					uni.hideLoading();
					// if (res.content?.length < 20) {
					// 	this.$toast('暂无更多数据！');
					// }
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},

		// 判断是否无更多数据
		checkNoMoreData(res) {
			if (res?.length < 20) {
				this.noMoreData = true;
			} else {
				this.noMoreData = false;
			}
			console.log(this.noMoreData, 3333);
		},
		bindDateChange: function (e) {
			uni.showLoading({
				title: '加载中'
			});
			this.date = e.detail.value;
			// this.page = 1;
			this.recordList = [];
			this.fetchData();
		},
		checkChangeList(e) {
			if (this.selectType == '1') {
				this.sex2.forEach((item) => {
					if (item.value !== 3 && item.value !== 2) {
						item.disable = true;
					} else {
						item.disable = false;
					}
				});
				this.selectType2 = 3;
			} else if (this.selectType == '2') {
				this.sex2.forEach((item) => {
					if (item.value !== 1 && item.value !== 4) {
						item.disable = true;
					} else {
						item.disable = false;
					}
				});
				this.selectType2 = 1;
			} else {
				this.sex2.forEach((item) => {
					item.disable = false;
				});
			}
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		}
	}
};
</script>

<style scoped lang="less">
.content {
	padding: 40rpx 0;
	height: 100%;
	box-sizing: border-box;
	.tab-content {
		line-height: 1.6;
		height: 100%;
		.list-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			.uni-list-cell-db {
				display: block;
				border: 2rpx solid #d1d1d1;
				border-radius: 8rpx;
				padding: 8rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6d6d6d;
				text-align: center;
				font-style: normal;
				text-transform: none;
				.uni-input {
					display: flex;
					align-items: center;
				}
			}
			.searchInput {
				width: max-content;
				height: 60rpx;
				padding: 0 10rpx 0 20rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #d1d1d1;
				font-weight: 400;
				font-size: 24rpx;
				color: #6d6d6d;
				// line-height: 60rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}
		}
		.list-container {
			height: 95%;
			.record-list-container {
				// padding: 30rpx 0rpx;
				.record-list-title {
					display: flex;
					justify-content: space-between;
					background: #f6f6f6;
					padding: 20rpx 30rpx;
					margin: 30rpx 0;
					.left {
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
					.right {
						font-weight: 400;
						font-size: 24rpx;
						color: #b0b0b0;
					}
					// width: 100%;
				}
				.record-item {
					border-radius: 10rpx;
					padding: 20rpx 30rpx;
					margin-bottom: 10rpx;
					.record-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 12rpx;
						.record-header-text {
							text-align: left;
							font-style: normal;
							text-transform: none;
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #3a3a3a;
						}
					}

					.amount {
						text-align: left;
						font-style: normal;
						text-transform: none;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #ff6737;
					}

					.amount2 {
						text-align: left;
						font-style: normal;
						text-transform: none;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #b0b0b0;
					}

					.record-meta {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #6d6d6d;
						.status {
							color: #999;
						}

						.statusLose {
							color: #f02506;
						}
					}
				}
			}
			.loading-status {
				padding: 20rpx;
				text-align: center;
			}

			.no-more {
				color: #999;
				font-size: 24rpx;
			}
		}
	}
}

// .tab-headers {
// 	display: flex;
// 	justify-content: space-around;
// 	margin-bottom: 40rpx;
// }

// .tab-header {
// 	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
// 	font-weight: 500;
// 	font-size: 32rpx;
// 	text-align: center;
// 	font-style: normal;
// 	text-transform: none;
// 	padding: 20rpx;
// 	cursor: pointer;
// }

// .active {
// 	color: #0a978e;
// 	border-bottom: 6rpx solid #0a978e;
// }

.line {
	width: 100%;
	margin: 0 auto;
	margin-top: 20rpx;
	border-bottom: 1rpx solid #efefef;
}

.title-date {
	display: inline-block;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
}

.title-number {
	margin-left: 10px;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #b0b0b0;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.popup-content {
	padding: 20rpx;
	padding-left: 48rpx;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	background-color: white;
	border-radius: 20rpx 20rpx 0 0;
	.popup-title {
		font-weight: 500;
		font-size: 28rpx;
		color: #3a3a3a;
		margin-bottom: 20rpx;
	}
	.popup-tab {
		font-weight: 400;
		font-size: 26rpx;
		color: #6d6d6d;
		margin-top: 20rpx;
	}

	.footer {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin: 60rpx 0;
		text-align: center;

		.btn1 {
			width: 200rpx;
			height: 72rpx;
			background: #f6f6f6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: black;
			line-height: 72rpx;
		}
		.btn2 {
			width: 200rpx;
			height: 72rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #ffffff;
			background: #10beaf;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 72rpx;
		}
	}
	::v-deep .checklist-group .checklist-box.is--tag.is-checked {
		border-color: transparent !important;
		// background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%) !important;
		background: #f0fdfa !important;
		border-radius: 8rpx 8rpx 8rpx 8rpx !important;

		padding: 24rpx 0rpx;
		// border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #10beaf;
		margin-right: 16rpx;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag {
		border-color: transparent !important;
		// border-radius: 8rpx 8rpx 8rpx 8rpx !important;
		color: #6d6d6d;
		padding: 24rpx 0rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #6d6d6d;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-right: 16rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx !important;
		border: 2rpx solid #10beaf;
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked .checklist-text {
		font-weight: bold;
		font-size: 26rpx;
		color: #10beaf;
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text  {
		font-size: 26rpx;;
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content {
		justify-content: center;
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		width: 30%
	}
}
</style>
